.placeholder {
    width: 100%;
    height: 48px;
    padding: 0 24px;
}

.space {
    width: 1200px;
    border-bottom: 1px solid black;
}

.wheel {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 1px solid black;
    animation: move 3s linear infinite;
}

.line {
    margin-top: 25px;
    margin-left: 25px;
    width: 25px;
    height: 1px;
    border-bottom: 1px solid black;
}

@keyframes move {
    100% {
        transform: translateX(1200px) rotate(2751deg);
    }
}

.galaxy {
    width: 600px;
    height: 600px;
    background-image: url("../../../assets/previews/css-animations/galaxy.jpg");
    background-position: center center;
    position: relative;
    overflow: hidden;
}

.sun {
    width: 100px;
    height: 100px;
    margin-top: 250px;
    margin-left: 250px;
    background-image: url('../../../assets/previews/css-animations/sun.jpg');
}

.mercury {
    width: 50px;
    height: 50px;
    left: 450px;
    top: 300px;
    background-image: url('../../../assets/previews/css-animations/mercury.jpg');
    transform-origin: -150px 0px;
    animation: rotation 2.4s linear infinite;
    position: absolute;
}

@keyframes rotation {
    to {
        transform: rotate(1turn);
    }
}

.earth {
    width: 25px;
    height: 25px;
    background-image: url('../../../assets/previews/css-animations/earth.jpg');
    animation: rotation-earth 6s linear infinite;
    position: absolute;
    left: 500px;
    top: 300px;
    transform-origin: -200px 0;
}

@keyframes rotation-venus {
    to {
        transform: rotate(1turn);
    }
}


.venus {
    width: 25px;
    height: 25px;
    background-image: url('../../../assets/previews/css-animations/venus.jpg');
    position: absolute;
    top: 300px;
    left: 550px;
    transform-origin: -250px 0;
    animation: rotation-earth 10s linear infinite;
}

@keyframes rotation-earth {
    to {
        transform: rotate(1turn);
    }
}

.moveY {
    animation: moveY 2s ease-in-out infinite alternate;
}

@keyframes moveY {
    0%, 100% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-200px);
    }
}

.img {
    clip-path: circle(40% at 50% 50%);
    transition: clip-path 400ms ease;
}

.img:hover {
    clip-path: circle(75% at 50% 50%);
}

